<template>
	<view class="balance">
		<mx-navbar :title="'会员储值'" :background="'#fff'" text_color="#000"></mx-navbar>

        <view class="info-box">
            <image class="czk" src="/static/ui/czk.jpg"></image>
            <view class="info-main">
                <view class="ye-txt">
                    账户余额（元）
                </view>
                <view class="ye">
                    {{user_info.balance}}
                </view>
                <view class="jl-ul">
                    <view class="jl-jy" @click="go('/pages-user/balance/list')">
                        <tetx class="jy-txt">余额明细</tetx>
                        <tetx class="iconfont mx-xiangyoujiantou"></tetx>
                    </view>
					
					<view class="jl-jy" @click="go('/pages/tabs/order/index')" style="margin-left: 50rpx;">
					    <tetx class="jy-txt">充值订单</tetx>
					    <tetx class="iconfont mx-xiangyoujiantou"></tetx>
					</view>
                </view>
            </view>
        </view>

        <view class="cz-box">
            <view class="cz-item" :class="{'cz-item-active': curr == index}" v-for="(item,index) in configList" :key="index" @click="changeitem(index)">
                <view class="cz-num-box">
                    <text class="cz-num">
                        {{item.amount}}
                    </text>
                    <text class="cz-i">元</text>
                </view>
                <view class="zs" v-if="item.type == 1">
                    赠 {{item.gift}} 元
                </view>
				<view class="zs" v-if="item.type == 2">
				    赠 优惠券*{{item.gift}}
				</view>
            </view>
        </view>

        <view class="sm-box" v-if="desc">
            <view class="sm-title">
                使用说明：
            </view>
            <view class="sm-nr">
                <view class="smi" v-html="desc">
                </view>
            </view>
        </view>

        <view class="fix-bottom">
            <view class="xy">
                <text class="xy-txt">我已阅读并同意</text>
                <text class="xy-name">《会员储值协议》</text>
            </view>
            <view class="czbtn" @click="submit">立即储值</view>
        </view>
	</view>
</template>
<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		toRefs,
		getCurrentInstance,
		ref
	} from "vue"
	// import {
	// 	useStore
	// } from 'vuex';
	// const store = useStore();
	const {
		proxy
	} = getCurrentInstance()
	
	onShow(()=> {
		// getUser()
		// getData()
	})
	
	const user_info = ref({})
	async function getUser() {
		let res = await proxy.$post('UserInfo', {},false,false)
		if(res.code === 200) {
			user_info.value = res.data
		    store.commit("UPDATE_USER_INFO", res.data)
		}
	}
	
	const configList = ref([])
	const curr = ref(0)
	const desc = ref('')
	async function getData() {
		let res = await proxy.$post('RechargeConfig', {})
		if(res.code === 200) {
			configList.value = res.data.config || []
			desc.value = res.data.data || ''
		}
	}
	
	function changeitem(index) {
		curr.value = index
	}
	
	async function submit() {
		let res = await proxy.$post('Recharge', {
			amount: configList.value[curr.value].amount
		})
		if(res.code === 200) {
			goPay(res.data)
		}
	}
	
	async function goPay(item) {
		let res = await proxy.$post('OrderPay', {
			order_sn: item.order_sn
		})
		if (res.code == 200) {
			pay(res.data)
		}
	}
	
	
	function pay(info) {
		let jsParams = info
		uni.requestPayment({
			provider: "wxpay",
			timeStamp: jsParams.timeStamp,
			nonceStr: jsParams.nonceStr,
			package: jsParams.package,
			signType: jsParams.signType,
			paySign: jsParams.paySign,
			success: (res) => {
				proxy.$toast('充值成功').then(()=> {
					getUser()
				})
				
			},
			fail: (err) => {
				proxy.$toast('支付失败')
			},
		})
	}
	
	function go(url) {
		if(url == '/pages/tabs/order/index') {
			uni.setStorageSync('ocurr', 1)
		}
		proxy.$go(url)
	}
</script>
<style lang="scss" scoped>
.balance{
    .info-box{
        position: relative;
        height: 360rpx;
        .czk{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .info-main{
            position: relative;
            z-index: 2;
            padding: 40rpx;
            .ye-txt{
                font-size: 26rpx;
                color: #000;
            }
            .ye{
                font-size: 58rpx;
                font-weight: 500;
                color: #000;
                margin-top: 10rpx;
            }
            .jl-ul{
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                color: $main_color;
                font-size: 26rpx;
                margin-top: 90rpx;
                .jl-jy{
                    .iconfont{
                        font-size: 24rpx;
                    }
                }
            }
        }
    }

    .cz-box{
        width: 100%;
        padding: 30rpx;
        display: grid;
        gap: 20rpx;
        grid-template-columns: repeat(2, 1fr);
        .cz-item{
            width: 100%;
            // height: 200rpx;
            background: #fff;
            border-radius: 20rpx;
            border: 1px solid #fff;
            .cz-num-box{
                width: 100%;
                padding: 30rpx 0;
                font-size: 45rpx;
                font-weight: 500;
                display: flex;
                align-items: center;
                justify-content: center;
                border-bottom: 1px solid #f6f6f6;
                .cz-i{
                    font-size: 22rpx;
                    margin-left: 10rpx;
                    margin-top: 4rpx;
                }
            }
            .zs{
                width: 100%;
                text-align: center;
                font-size: 24rpx;
                color: #666;
                padding: 20rpx;
            }
        }

        .cz-item-active{
            color: $main_color;
            background: #e4f5ed;
            border: 1px solid $main_color;
            .cz-num-box{
                border-bottom: 1px solid #c9ebdc;
            }
            .zs{
                color: $main_color;
            }
        }
    }

    .sm-box{
        width: 100%;
        color: #000;
        padding: 20rpx 30rpx 240rpx ;
        font-size: 24rpx;

        .sm-title{
            width: 100%;
            font-size: 28rpx;
            font-weight: 500;
        }
        .sm-nr{
            margin-top: 20rpx;
            .smi{
                margin-bottom: 10rpx;
                line-height: 1.7;
            }
        }
    }


    .fix-bottom{
        width: 100%;
        height: auto;
        background: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9;
        padding: 0 20rpx;
        .xy{
            padding: 20rpx ;
            font-size: 24rpx;
            color: #000;
            .xy-name{
                color: #2947ca;
            }
        }

        .czbtn{
            margin: 10rpx 0 30rpx;
            width: 100%;
            line-height: 90rpx;
            text-align: center;
            font-size: 28rpx;
            letter-spacing: 4rpx;
            color: #fff;
            background: $main_color;
            border-radius: 90rpx;
        }

    }
}
</style>
